<template>
  <div :bordered="false">
    <f-table ref="orderDrugs" rowKey="orderDetailsId" :scroll="{x:true}" handler="orderDrugsHandler" @onSuccess='onLoad' :operator="operator" :params="queryParam" :api="api.bod" :autoLoad="false" :showPagination="false" :multiple="false">
      <a-table-column align="center" key="supplierName" title="供应商" data-index="supplierName"/>
      <a-table-column align="center" key="drugsName" title="商品名称" data-index="drugsName"/>
      <a-table-column align="center" key="drugsSpec" title="规格" data-index="drugsSpec"/>
      <a-table-column align="center" key="drugsLotNo" title="批号" data-index="drugsLotNo"/>
      <a-table-column align="center" key="saleNum" title="数量" data-index="saleNum"/>
      <a-table-column align="center" key="salePrice" title="单价" data-index="salePrice"/>
      <a-table-column align="center" key="saleAmount" title="销售金额" data-index="saleAmount"/>
      <a-table-column align="center" key="supplierBond" title="垫付金额" data-index="supplierBond" v-if="order.supplierBondType>0"/>
      <a-table-column align="center" key="customBond" title="资保金金额" data-index="customBond" v-if="order.customBondType!=0&&order.customBondType!=7&&order.customBondType!=5"/>
      <a-table-column align="center" key="returnAmount" title="预收款金额" data-index="returnAmount" v-if="order.customBondType==7"/>
      <a-table-column align="center" key="returnAmount" title="回款金额" data-index="returnAmount" v-if="order.customBondType==0"/>
      <a-table-column align="center" key="action" title="操作">
        <template slot-scope="text, record">
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a @click="discount(record)" v-if='record.saleType==1'>票折</a>
          <a-divider type="vertical" v-if='record.saleType==1'/>
          <a href="javascript:;" @click="$refs.orderDrugs.del(record)">删除</a>
        </template>
      </a-table-column>
    </f-table>

    <f-form ref="form" :action="api.busOrder" :form-key="this.order.orderId">
      <a-divider orientation="left">
        附件上传
      </a-divider>
      <f-form-item type="upload" name="orderImage" :value="orderImage" :file-max="50" :disabled="readOnly" :busId="this.order.orderId" busType="Order" :realRemove="true"/>
    </f-form>

    <a-modal title="订单商品" v-model="detailsModal" v-if="detailsModal" width="800px" height="500px" @cancel="handleCancel" @ok="handleSubmit">
      <f-form ref="orderDrugsForm" :action="api.bod" v-if="detailsModal" :form-key="this.formItem.orderDetailsId">
        <f-form-item label="商品名称" placeholder="请选择商品" name="drugsName" :readOnly="true" :required="true" :value.sync="formItem.drugsName" :trigger-change="true">
          <a-tooltip slot="addonBefore" placement="top" title="点击选择商品">
            <a-icon type="experiment" style="cursor:pointer" @click="openDrugsModal"/>
          </a-tooltip>
        </f-form-item>
        <f-form-item label="商品批号" placeholder="请选择批号" v-if="formItem.drugsId" name="drugsLotNo" :readOnly="true" :value.sync="formItem.drugsLotNo" :trigger-change="true">
          <a-tooltip slot="addonBefore" placement="top" title="点击选择批号,批号不确定可不选">
            <a-icon type="barcode" style="cursor:pointer" @click="openDrugsLotModal"/>
          </a-tooltip>
          <a-tooltip slot="suffix" placement="topRight" title="删除批号">
            <a-icon type="delete" @click="deleteDrugsLot"/>
          </a-tooltip>
        </f-form-item>
        <f-form-item label="销售数量" type="number" v-if="formItem.drugsId" data-type="number" name="saleNum" :required="true" :value.sync="formItem.saleNum"/>
        <f-form-item label="销售价格" type="number" v-if="formItem.drugsId" :precision="4" data-type="number" name="salePrice" :required="true" :value.sync="formItem.salePrice"/>
        <a-descriptions style="padding-left: 25px" v-if="saleAmount>0">
          <a-descriptions-item label="销售金额">{{saleAmount}}</a-descriptions-item>
        </a-descriptions>
      </f-form>
    </a-modal>

    <a-modal title="票折管理" v-model="discountModal" v-if="discountModal" width="800px" height="500px" @cancel="handleCancel" @ok="discountSubmit">
      <f-form ref="orderDrugsForm" :action="api.bod.discount" v-if="discountModal" :form-key="this.formItem.orderDetailsId">
        <f-form-item label="票折金额" type="number"  :precision="2" data-type="number" name="saleAmount" :required="true" :value.sync="formItem.saleAmount"/>
      </f-form>
    </a-modal>
    <select-drugs-modal ref="drugsModal" @drugsSelectChange="drugsSelectChange"></select-drugs-modal>
    <select-drugs-lot-modal ref="drugsLotModal" @drugsSelectChange="drugsLotSelectChange"></select-drugs-lot-modal>
  </div>
</template>

<script>
  import api from './js/api'
  import SelectDrugsModal from '../drugs/select_drugs_modal'
  import SelectDrugsLotModal from '../drugs/select_drugslot_modal'

  export default {
    name: 'OrderDrugs',
    components: { SelectDrugsLotModal, SelectDrugsModal },
    data() {
      let me = this
      //操作按钮
      let operator = []
      operator.push({
        name: '添加订单商品',
        icon: 'plus',
        that: this,
        handler: (table) => {
          this.formItem = this.getFormItem()
          this.detailsModal = true
        }
      })
      return {
        api: Object.assign(api, this.api),
        refs: this.$refs,
        //列表初始化查询参数
        queryParam: {},
        supplierId: '',
        readOnly: false,
        orderId: '',
        order: {},
        orderImage:[],
        saleAmount:0,
        detailsModal: false,
        discountModal: false,
        formItem: this.getFormItem(),
        operator: operator
      }
    },
    created() {
    },
    watch: {
      "formItem.salePrice": function(value) {
        if(this.formItem.saleNum){
          this.saleAmount= value*this.formItem.saleNum;
        }

      },
      "formItem.saleNum": function(value) {
        if(this.formItem.salePrice){
          this.saleAmount= value*this.formItem.salePrice;
        }
      }
    },
    methods: {
      getFormItem() {
        return {
          orderDetailsId: '',
          drugsName: '',
          supplierId:'',
          drugsId: '',
          drugsLotId: ''
        }
      },
      setData(data) {
        if (data && data.orderId) {
          this.queryParam.orderId = data.orderId
          this.supplierId = data.supplierId
          this.orderId=data.orderId
          this.supplierId=data.supplierId
          this.order = data
          let params = {
            orderId: data.orderId
          }
          this.refs['form'].getDetails(params, (data) => {
            this.orderImage = data.orderImage
          })
          this.$refs['orderDrugs'].refresh(false)
        }
      },
      //商品选择框
      openDrugsModal() {
        this.$refs['drugsModal'].open(this.supplierId)
      },
      //规格选择框
      openDrugsLotModal() {
        this.$refs['drugsLotModal'].open(this.formItem.drugsId)
      },
      //清空规格
      deleteDrugsLot() {
        this.$refs['orderDrugsForm'].getForm().setFieldsValue({ 'drugsLotNo': '' })
        this.formItem.drugsLotId = ''
      },
      //商品选择回调
      drugsSelectChange(selectedRowKeys, selectedRows) {
        this.$refs['orderDrugsForm'].getForm().setFieldsValue({ 'drugsName': selectedRows[0].drugsName })
        this.formItem.drugsName = selectedRows[0].drugsName
        this.formItem.drugsId = selectedRowKeys[0]
      },
      //批号选择回调
      drugsLotSelectChange(selectedRowKeys, selectedRows) {
        this.$refs['orderDrugsForm'].getForm().setFieldsValue({ 'drugsLotNo': selectedRows[0].drugsLotNo })
        this.formItem.drugsLotId = selectedRowKeys[0]
      },
      edit(record) {
        this.formItem = record
        this.detailsModal = true
      },
      discount(record) {
        this.formItem = record
        this.discountModal = true
      },
      onLoad(record){
        if(record.total>0){
          this.operator=[]
        }
      },
      handleSubmit() {
        let params = {
          drugsId: this.formItem.drugsId,
          supplierId: this.supplierId,
          orderId: this.orderId,
          saleType:this.formItem.saleType,
          drugsLotId: this.formItem.drugsLotId
        }
        this.$refs['orderDrugsForm'].submit(params, this.handleSuccess)
      },
      discountSubmit() {
        this.http.post(this, {
          url: this.api.bod.discount,
          data: {
            orderDetailsId: this.formItem.orderDetailsId,
            saleAmount: this.formItem.saleAmount
          },
          success(me, data) {
            me.$refs["orderDrugs"].refresh(false)
            me.discountModal = false
          }
        })
      },
      handleSuccess() {
        this.$refs['orderDrugs'].refresh()
        this.detailsModal = false
      },
      handleCancel() {
        this.detailsModal = false
      }
    }
  }
</script>